<!-- 基本信息 START -->
<nz-card>
    <nz-descriptions nzBordered nzSize="small" [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }" nzTitle="基本信息">
        <nz-descriptions-item nzTitle="名称">{{ detailsData?.couponInfo.name }}</nz-descriptions-item>
        <nz-descriptions-item nzTitle="优惠券ID">{{ detailsData?.couponInfo.no }}</nz-descriptions-item>
        <nz-descriptions-item nzTitle="类型">
            {{ detailsData?.couponInfo.type == 1 ? '满减券' : detailsData?.couponInfo.type == 2 ? '折扣券' : '随机券' }}
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="创建时间">{{ detailsData?.couponInfo.createTime }}</nz-descriptions-item>

        <nz-descriptions-item nzTitle="状态">
            {{ detailsData?.couponInfo.status == 1 ? '未开始' : detailsData?.couponInfo.status == 2 ? '进行中' : detailsData?.couponInfo.status == 3? '已结束': detailsData?.couponInfo.status == 4 ? '已停止': '草稿' }}
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="使用门槛">
            {{ detailsData?.couponInfo.orderLimitMoney == 0 ? '无门槛' : '满' + detailsData?.couponInfo.orderLimitMoney + '元可用' }}
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="减免额度">
            {{ detailsData?.couponInfo.type == 1 ? detailsData?.couponInfo.limitSmall+'元' : detailsData?.couponInfo.type == 2 ? detailsData?.couponInfo.limitSmall+'折 最多' + detailsData?.couponInfo.limitBig+'元': '随机'+detailsData?.couponInfo.limitSmall + ' - ' + detailsData?.couponInfo.limitBig + '元' }}
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="前端展示">
            {{ detailsData?.couponInfo.isShowWeb == 1 ? '展示' : '不展示' }}
        </nz-descriptions-item>

        <nz-descriptions-item nzTitle="领取时间">
            {{ detailsData?.couponInfo.getBeginTime }} ~ {{ detailsData?.couponInfo.getEndTime }}
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="领取人限制">
            {{ detailsData?.couponInfo.userType == 0 ? '不限制' : detailsData?.couponInfo.userType == 1 ? 'C端用户' : 'B端用户' }}
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="领取次数">
            {{ detailsData?.couponInfo.userLimitNum > 0 ? '每人限领' + detailsData?.couponInfo.userLimitNum +'次' : '不限制' }}
        </nz-descriptions-item>
        <!-- <nz-descriptions-item nzTitle="使用时间">
            {{ detailsData?.couponInfo.useBeginTime }} ~ {{ detailsData?.couponInfo.useEndTime }}
        </nz-descriptions-item> -->

        <nz-descriptions-item nzTitle="限制使用">
            <ng-container *ngIf="detailsData?.couponInfo.limitTimeNum === -1;else templateXz">
                {{ detailsData?.couponInfo.useBeginTime }} ~ {{ detailsData?.couponInfo.useEndTime }}
            </ng-container>
            <ng-template #templateXz>
                <span>{{ detailsData?.couponInfo.limitTimeNum == 0 ? '领券当天可用' : '领券当日起' + detailsData?.couponInfo.limitTimeNum + '天内可用' }}</span>
            </ng-template>
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="过期提醒">
            {{ detailsData?.couponInfo.remind == 0 ? '不提醒' : '过期前' + detailsData?.couponInfo.remind +'天提醒' }}
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="自动发放">
            {{ detailsData?.couponInfo.autoReverse == -1 ? '新人' : detailsData?.couponInfo.autoReverse == 0? '不自动发放' : '每' + detailsData?.couponInfo.autoReverse +'天首次进店自动发放' }}
        </nz-descriptions-item>
        <nz-descriptions-item [nzSpan]="2" nzTitle="使用说明">{{ detailsData?.couponInfo.useDesc }}</nz-descriptions-item>

        <nz-descriptions-item [nzSpan]="4" nzTitle="备注">{{ detailsData?.couponInfo.remark ? detailsData?.couponInfo.remark : '-' }}</nz-descriptions-item>
    </nz-descriptions>
</nz-card>
<!-- 基本信息 END -->

<!-- 适用商品 START -->
<nz-card class="goods-descriptions m-t-2">
    <nz-descriptions nzSize="small" [nzColumn]="1" nzTitle="适用商品">
        <nz-descriptions-item nzTitle="指定分类">{{ detailsData?.applicableGoods.containsTypes || '-' }}</nz-descriptions-item>
        <nz-descriptions-item nzTitle="指定品牌">{{ detailsData?.applicableGoods.containsBrand || '-' }}</nz-descriptions-item>
        <nz-descriptions-item nzTitle="追加可用商品">
            <span>已选 {{ detailsData?.applicableGoods.containsGoodsIdList.length }} 个商品</span>
            <a nz-button nzType="link" (click)="showGoodsModal(detailsData?.applicableGoods.containsGoodsIdList)">点击查看</a>
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="排除可用商品">
            <span>已选 {{ detailsData?.applicableGoods.filterGoodsIdList.length }} 个商品</span>
            <a nz-button nzType="link" (click)="showGoodsModal(detailsData?.applicableGoods.filterGoodsIdList)">点击查看</a>
        </nz-descriptions-item>
    </nz-descriptions>
</nz-card>
<!-- 适用商品 END -->

<!-- 使用信息 START -->
<nz-card class="m-t-2">
    <p class="mcard-title">
        使用信息
        <i nz-icon nz-tooltip nzType="exclamation-circle" nzTheme="outline" [nzTooltipTitle]="titleTemplate" nzTooltipPlacement="right"></i>
        <ng-template #titleTemplate>
            <p>用券成交总额:使用了优惠券并且成交的订单总额；</p>
            <p>优惠总金额:使用了优惠券的抵扣额度总额；</p>
            <p>费效比优惠总金额/用券成交总额；</p>
            <p>用券单笔价:用券成交总额/订单数；</p>
            <p>购买商品数:用券的订单中包含的商品总数；</p>
        </ng-template>
    </p>
    <div style="background: #ECECEC; padding: 12px;">
        <nz-row>
          <nz-col [nzSpan]="6">
            <nz-card nzSize="small">
              <dl class="statistics-dl">
                  <dt>最大发行数量</dt>
                  <dd>
                      <span>{{ detailsData?.useCouponInfo?.total || '0' }}</span>
                      <span class="dd-tag">个</span>
                  </dd>
              </dl>
            </nz-card>
          </nz-col>
          <nz-col [nzSpan]="6">
            <nz-card nzSize="small">
              <dl class="statistics-dl">
                  <dt>已领取</dt>
                  <dd>
                      <span>{{ detailsData?.useCouponInfo?.numberReceived || '0' }}</span>
                      <span class="dd-tag">
                          {{ percentageCalc(detailsData?.useCouponInfo?.numberReceived, detailsData?.useCouponInfo?.total) }}%
                      </span>
                  </dd>
              </dl>
            </nz-card>
          </nz-col>
          <nz-col [nzSpan]="6">
            <nz-card nzSize="small">
              <dl class="statistics-dl">
                  <dt>已使用</dt>
                  <dd>
                      <span>{{ detailsData?.useCouponInfo?.usedNumber || '0' }}</span>
                      <span class="dd-tag">
                          {{ percentageCalc(detailsData?.useCouponInfo?.numberReceived ==0 ? 0 : detailsData?.useCouponInfo?.usedNumber, detailsData?.useCouponInfo?.numberReceived) }}%
                      </span>
                  </dd>
              </dl>
            </nz-card>
          </nz-col>
          <nz-col [nzSpan]="6">
            <nz-card nzSize="small">
              <dl class="statistics-dl">
                  <dt>用券总成交额</dt>
                  <dd>
                      <span>{{ detailsData?.useCouponInfo?.totalTurnover || '0' }}</span>
                      <span class="dd-tag">￥</span>
                  </dd>
              </dl>
            </nz-card>
          </nz-col>
          <nz-col [nzSpan]="6">
            <nz-card nzSize="small">
              <dl class="statistics-dl">
                  <dt>优惠总金额</dt>
                  <dd>
                      <span>{{ detailsData?.useCouponInfo?.totalDiscountAmount || '0' }}</span>
                      <span class="dd-tag">￥</span>
                  </dd>
              </dl>
            </nz-card>
          </nz-col>
          <nz-col [nzSpan]="6">
            <nz-card nzSize="small">
              <dl class="statistics-dl">
                  <dt>费效比</dt>
                  <dd>
                      <span>{{ detailsData?.useCouponInfo?.costEffectiveness || 0 }}</span>
                      <span class="dd-tag">
                          {{ percentageCalc(detailsData?.useCouponInfo?.totalTurnover == 0 ? 0 : detailsData?.useCouponInfo?.totalDiscountAmount, detailsData?.useCouponInfo?.totalTurnover) }}%
                      </span>
                  </dd>
              </dl>
            </nz-card>
          </nz-col>
          <nz-col [nzSpan]="6">
            <nz-card nzSize="small">
              <dl class="statistics-dl">
                  <dt>用券笔单价</dt>
                  <dd>
                      <span>{{ detailsData?.useCouponInfo?.customerPrice || '0' }}</span>
                      <span class="dd-tag">￥</span>
                  </dd>
              </dl>
            </nz-card>
          </nz-col>
          <nz-col [nzSpan]="6">
            <nz-card nzSize="small">
              <dl class="statistics-dl">
                  <dt>购买商品数</dt>
                  <dd>
                      <span>{{ detailsData?.useCouponInfo?.paidGoodsNum || '0' }}</span>
                      <span class="dd-tag">个</span>
                  </dd>
              </dl>
            </nz-card>
          </nz-col>
        </nz-row>
    </div>
</nz-card>
<!-- 使用信息 END -->

<!-- 用户优惠券 START -->
<nz-card class="m-t-2">
    <p class="mcard-title">用户优惠券</p>

    <!-- Table -->
    <div class="table-wrap">
        <div class="seach-content">
            <div class="seach-lf">
                <button nz-button nzType="primary" class="m-r-8" (click)="showCouponsModal()">手动发放优惠券</button>
                <button nz-button nzType="primary" [disabled]="stopUserCoupon" (click)="showCloseModal()">撤回全部用户用券</button>
            </div>
            <div class="seach-rt">
                <nz-select
                    nzAllowClear
                    [nzMaxTagCount]="1"
                    nzMode="multiple"
                    nzPlaceHolder="全部"
                    [(ngModel)]="stateSelected"
                    (ngModelChange)="stateChange($event)">
                    <nz-option
                        *ngFor="let item of stateOptions"
                        [nzLabel]="item.label"
                        [nzValue]="item.value">
                    </nz-option>
                </nz-select>
                <button nz-button nzType="primary" class="m-l-8" (click)="seachTable()">查询</button>
            </div>
        </div>

        <div class="table-content">
            <nz-table
                #basicTable
                nzSize="small"
                nzShowSizeChanger
                nzShowQuickJumper
                nzOuterBordered
                [nzFrontPagination]="false"
                [nzLoadingDelay]="100"
                [nzData]="detailsData?.couponUserRecordIPage?.records"
                [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
                [nzTotal]="detailsData?.couponUserRecordIPage?.total"
                [nzPageIndex]="entityParam?.couponUserRecordDTO?.pageNum"
                [nzPageSize]="detailsData?.couponUserRecordIPage?.size"
                [nzShowTotal]="totalTemplate"
                (nzPageIndexChange)="user_onPageIndexChange($event)"
                (nzPageSizeChange)="user_onPageSizeChange($event)"
            >
                <thead>
                    <tr>
                        <th nzAlign="center">ID</th>
                        <th nzAlign="center">客户ID</th>
                        <th nzAlign="center">领取面值</th>
                        <th nzAlign="center">实际抵扣</th>
                        <th nzAlign="center">关联订单号</th>
                        <th nzAlign="center">领取时间</th>
                        <th nzAlign="center">使用时间</th>
                        <th nzAlign="center">过期时间</th>
                        <th nzAlign="center">状态</th>
                        <th nzAlign="center">操作</th>
                    </tr>
                </thead>
          
                <tbody>
                    <tr *ngFor="let data of basicTable.data; let index = index;">
                        <td nzAlign="center">{{ data.id }}</td>
                        <td nzAlign="center">
                            <a
                                nz-button
                                nz-button-tdlink
                                nzType="link"
                                target="_blank"
                                [disabled]="!data.realUserId"
                                [routerLink]="['/customer/tabs', data.realUserId, 0]">
                                {{ data.realUserId || '-' }}
                            </a>
                        </td>
                        <td nzAlign="center">
                            <div [ngSwitch]="detailsData?.couponInfo.type">
                                <!-- 满减 -->
                                <div *ngSwitchCase="1">
                                    {{ data.couponLimitSmall }}
                                </div>
                                <!-- 折扣 -->
                                <div *ngSwitchCase="2">
                                    {{ data.couponLimitSmall }}<span>折</span>
                                </div>
                                <!-- 随机 -->
                                <div *ngSwitchCase="3">
                                    {{ data.discountsAmount }}
                                </div>
                                <div *ngSwitchDefault>-</div>
                            </div>
                        </td>
                        <td nzAlign="center">
                            <ng-container *ngIf="data.useTime;else templateNum">
                                {{ data.discountsAmount ? '￥' + data.discountsAmount : '-' }}
                            </ng-container>
                            <ng-template #templateNum>-</ng-template>
                        </td>
                        <td nzAlign="center">{{ data.orderNum ? data.orderNum : '-' }}</td>
                        <td nzAlign="center">{{ (data.getTime | date: 'yyyy-MM-dd HH:mm:ss') || '-' }}</td>
                        <td nzAlign="center">{{ (data.useTime | date: 'yyyy-MM-dd HH:mm:ss') || '-' }}</td>
                        <td nzAlign="center">
                            <!-- <span *ngIf="data.limitTimeNum == -1; else useEndTimeBlock">{{ data.useEndTime || '-' }}</span>
                            <ng-template #useEndTimeBlock>领取当日起 {{ data.limitTimeNum }} 内可用</ng-template> -->
                            {{ (data.endTime | date: 'yyyy-MM-dd HH:mm:ss') || '-' }}
                        </td>
                        <td nzAlign="center">
                            {{ status_to_Text(data.status) }}
                            <i
                                *ngIf="data.status == 5"
                                nz-icon
                                nz-tooltip
                                nzType="exclamation-circle"
                                nzTheme="outline"
                                nzTooltipTitle="{{data.remark}}"
                                nzTooltipPlacement="right">
                            </i>
                        </td>
                        <td nzAlign="center">
                            <button
                                nz-button
                                nzType="link"
                                [disabled]="data.status != 1"
                                (click)="showCloseModal(data.id)">
                                撤回用户用券
                            </button>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
          
            <!-- 分页template -->
            <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
        </div>
    </div>
</nz-card>
<!-- 用户优惠券 END -->

<nz-modal [(nzVisible)]="sendCouponsModal" nzTitle="手动发放优惠券" (nzOnCancel)="handleCancel()" [nzFooter]="null" [nzWidth]="550">
    <ng-container *nzModalContent>
        <nz-form-item>
            <nz-form-label [nzSpan]="5">请选择用户id</nz-form-label>
            <nz-form-control [nzSpan]="19">
                
                <nz-select nzMode="multiple" (nzScrollToBottom)="loadMore()" nzPlaceHolder="请选择用户id"  
                nzAllowClear
                nzShowSearch
                nzServerSearch
                    [nzDropdownRender]="renderTemplate" [(ngModel)]="userSelectedValue" (nzOnSearch)="onSearch($event)">
                    <ng-container *ngIf="!selectSearchLoading">
                        <nz-option nzCustomContent *ngFor="let o of userListOption.userList" [nzValue]="o.label"
                            [nzLabel]="o.label">
                            <span>{{o.label}}</span>
                        </nz-option>
                    </ng-container>
    
                    <nz-option *ngIf="selectSearchLoading" nzDisabled nzCustomContent>
                        <i nz-icon nzType="loading" class="loading-icon"></i> Loading Data...
                    </nz-option>
                </nz-select>
    
                <ng-template #renderTemplate>
                    <nz-spin *ngIf="userListOption.isLoading"></nz-spin>
                </ng-template>
    
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-control [nzOffset]="5">
                <button nz-button nzType="primary" class="m-r-8" (click)="sendCoupons()">确定</button>
                <button nz-button nzType="primary" (click)="handleCancel()">取消</button>
            </nz-form-control>
        </nz-form-item>
    </ng-container>
</nz-modal>

<nz-modal [(nzVisible)]="stopVisible" nzTitle="停止用户用券" (nzOnCancel)="handleCancel()" [nzFooter]="null">
    <ng-container *nzModalContent>
        <nz-form-item>
            <nz-form-label [nzSpan]="4">停止原因</nz-form-label>
            <nz-form-control [nzSpan]="20">
                <textarea rows="6" nz-input [(ngModel)]="stopContent" placeholder="请输入..."></textarea>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-control [nzSpan]="12" [nzOffset]="4">
                <button nz-button nzType="primary" class="m-r-8" (click)="stopFun()">停止</button>
                <button nz-button nzType="primary" (click)="handleCancel()">取消</button>
            </nz-form-control>
        </nz-form-item>
    </ng-container>
</nz-modal>

<nz-modal [(nzVisible)]="showGoods" nzTitle="查看已选商品" (nzOnCancel)="handleCancel()" [nzFooter]="null" [nzWidth]="1050">
    <ng-container *nzModalContent>
        <nz-table
            #rowSelectionTable
            nzSize="small"
            nzBordered
            nzShowSizeChanger
            [nzData]="selectGoodsTable?.records"
            [nzShowPagination]="false"
            [nzPageSize]="selectGoodsTable?.size">
            <thead>
                <tr>
                    <th nzAlign="center">ID</th>
                    <th nzAlign="center">商品</th>
                    <th nzAlign="center">销量</th>
                    <th nzAlign="center">销售库存</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of selectGoodsTable?.records">
                    <td nzAlign="center">{{data.id}}</td>
                    <td nzAlign="center">{{data.name}}</td>
                    <td nzAlign="center">{{data.salesVolume}}</td>
                    <td nzAlign="center">{{data.stockNum}}</td>
                </tr>
            </tbody>
        </nz-table>
        <ng-template #totalTemplate let-total> 共有 {{ total }} 条 </ng-template>

        <nz-pagination
            class="m-t-10"
            nzSize="small"
            [nzPageSizeOptions]="[10, 20, 50, 100]"
            nzShowSizeChanger
            nzShowQuickJumper
            [nzPageIndex]="selectGoodsTable?.current"
            [nzTotal]="selectGoodsTable?.total"
            [nzShowTotal]="totalTemplate"
            [nzPageSize]="selectGoodsTable?.size"
            (nzPageIndexChange)="onPageIndexChange_Select($event)"
            (nzPageSizeChange)="onPageSizeChange_Select($event)">
        </nz-pagination>
    </ng-container>
</nz-modal>